<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/23
  Time: 9:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的兴趣</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="/layui-v2.9.0/layui/layui.js"></script>
  <style>
    #header{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }
    #sidebar{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 50px; /* 留出头部导航的高度 */
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100%;
      padding: 10px;
      margin-top: 30px;
      z-index: 10 ;
    }
    #content {

      margin-top: 100px;
      width:51%;
      align-items: center;
    }
    #content_head_container{
      display: inline-list-item;
    }
    #sidebar_right{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 50px; /* 留出头部导航的高度 */
      bottom: 0;
      left: 0;
      width: 300px;
      height: 100%;
      padding: 10px;
      margin-top: 30px;
      margin-left: 1100px;
      z-index: 10 ;
      border: 1px solid saddlebrown;
    }
    #userHead{
      border-radius: 50%;
      overflow: hidden;
      width: 15%;
      height: 15%;
    }
    #content *{

    }
    .container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 10;
      border: none;
      /*padding: 10px;*/

    }
    .layui-nav *{
      font-size: 20px;
    }
    .layui-nav-tree.layui-nav-side{
      position: relative;
      margin-top: 10px;
    }
  </style>
</head>
<body>
<!--水平导航-->
<div id="header" class="layui-form layui-col-xs12 layui-bg-gray">
  <div class="container layui-header">
    <ul class="layui-nav layui-layout-left  layui-bg-gray" >
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-hide-xs">
        <img style="width: 40px;height: 40px; padding: 10px" src="/img/热趣部落.png" alt="图片">
      </li>
      <li class="layui-nav-item layui-hide-xs">
        <input type="text" placeholder="" class="layui-input">
        <div class="layui-input-split" style="cursor: pointer;">
          <i class="layui-icon layui-icon-search"></i>
        </div>

      </li>
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item "><a href="/forward/indexPage">首页</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserIndexPage">个人中心</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserSettingPage">账号设置</a></li>
      </li>
    </ul>
  </div>
</div>
<!--垂直导航-->
<div id="sidebar" class="layui-col-xs3 layui-col-xs-offset1">
  <ul  class="layui-nav layui-nav-tree layui-nav-side layui-bg-gray">
        <span class="layui-nav-item" style="padding-left: 10px">
             个人主页
        </span>
    <li class="layui-nav-item">
      <a  href="/forward/forwardUserIndexPage">
        <i class="layui-icon layui-icon-home">我的主页</i>
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserSubPage">
        <i class="layui-icon layui-icon-user">  我的关注</i>
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserTagPage">
        <i class="layui-icon layui-icon-face-smile-b">  我的兴趣</i>
      </a>
    </li>
    <%--        <li class="layui-nav-item">--%>
    <%--            <a href="interstTribal.html">--%>
    <%--                <i class="layui-icon layui-icon-group">兴趣部落 </i>--%>
    <%--            </a>--%>
    <%--        </li>--%>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserFriendPage"> <i class="layui-icon layui-icon-friends"> 我的好友 </i></a>
    </li>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserCommentPage"> <i class="layui-icon layui-icon-log">  我的评论</i></a>
    </li>
  </ul>
</div>
<form action="" class="layui-form">
  <div id="content" class="layui-col-xs-offset3 layui-bg-gray">
    <div class="layui-input-inline">
      <div id="ID-transfer-demo-showSearch" class="layui-col-xs-offset2" style="width: 100%">

      </div>
      <div class="layui-col-xs-offset2"style="margin-top: 20px">
        <button class="layui-btn" lay-submit="" lay-filter="demo1">确定</button>
        <button class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </div>
</form>


<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var transfer = layui.transfer;
    $.ajax({
      url: '/interest/getAllInterestLabels',
      type:"post",
      dataType: 'json',
      success: function (res) {
        data = res;
        // 渲染
        transfer.render({
          elem: '#ID-transfer-demo-showSearch',
          id: 'ID-transfer-demo',
          width: 300,
          height: 300,
          data: data,
          title: ['未选——兴趣标签', '已选——兴趣标签'],
          showSearch: true
        });
        //获取当前这个趣点已有的兴趣标签
        $.ajax({
          url : '/userinterest/getInterestByuid',
          dataType:'json',
          success: function (res){
            var val = [];
            for(let i=0;i<res.length;i++){
              val[i] = res[i].value;
            }
            transfer.reload('ID-transfer-demo', {
              value: val,
            })
          },
          error: function (res){
            layer.msg('兴趣标签获取失败');
          }
        });
      },
      error: function (data) {
        layer.msg('兴趣标签加载失败');
      }
    });
    // 提交事件
    form.on('submit(demo1)', function(data){
      var field = data.field; // 获取表单字段值
      // 显示填写结果，仅作演示用
      // 此处可执行 Ajax 等操作
      // …
      var t = transfer.getData('ID-transfer-demo');
      var dataToSend = {
        title: ' ',
        barText:' ',
        'transfers': t
      };
      t = JSON.stringify(dataToSend);
      $.ajax({
        url: '/userinterest/updateInterestByuid',
        type:"post",
        data: t,
        headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
        success: function (res) {
          layer.msg(res);
        },
        error: function (data) {
          layer.msg('上传失败');
        }
      });
      return false; // 阻止默认 form 跳转
    });
  });
</script>
</body>
</html>

